<template>
  <div class="warnings-page" @click.once="activateAudio">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h2>预警信息查看</h2>
        <p class="header-subtitle">实时监控和处理社区老人的健康预警信息</p>
      </div>
      <button @click="testAlert" style="margin-left: 20px; padding: 6px 12px; background: #ff6b6b; color: white; border: none; border-radius: 4px;">
        上线提示
      </button>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <div class="table-card">
        <div class="card-header">
          <div class="header-icon">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
            </svg>
          </div>
          <h3>预警信息列表</h3>
          <div class="header-stats">
            <div class="stat-item">
              <span class="stat-label">未解决:</span>
              <span class="stat-value pending">{{ pendingCount }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">已解决:</span>
              <span class="stat-value resolved">{{ resolvedCount }}</span>
            </div>
          </div>
        </div>

        <!-- 筛选器 -->
        <div class="filter-section">
          <div class="filter-group">
            <label>状态筛选:</label>
            <select v-model="filterStatus" @change="applyFilter">
              <option value="">全部</option>
              <option value="UNRESOLVED">未解决</option>
              <option value="RESOLVED">已解决</option>
            </select>
          </div>
          <div class="filter-group">
            <label>姓名搜索:</label>
            <input 
              v-model="searchName" 
              @input="applyFilter"
              placeholder="请输入老人姓名" 
              class="name-search-input"
            />
          </div>
        </div>

        <div class="card-content">
          <div v-if="loading" class="loading-state">
            <div class="spinner"></div>
            <p>正在加载预警信息...</p>
          </div>
          
          <div v-else-if="filteredAlertList.length === 0" class="empty-state">
            <svg viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
            </svg>
            <p>暂无预警信息</p>
          </div>
          
          <div v-else>
            <div class="table-container">
              <table class="warnings-table">
                <thead>
                  <tr>
                    <th>老人ID</th>
                    <th>老人姓名</th>
                    <th>预警类型</th>
                    <th>预警等级</th>
                    <th>位置</th>
                    <th>状态</th>
                    <th>预警时间</th>
                    <th>解决时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="alert in currentPageData" :key="alert.alertId" 
                      :class="['alert-row', { 'highlight': alert.status === 'UNRESOLVED' }]">
                    <td>
                      <div class="elder-info">
                        <div class="elder-avatar">
                          <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                          </svg>
                        </div>
                        {{ alert.elderId }}
                      </div>
                    </td>
                    <td>{{ alert.elderName }}</td>
                    <td>
                      <div class="alert-type">
                        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                          <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
                        </svg>
                        {{ alert.alertType }}
                      </div>
                    </td>
                    <td>
                      <span :class="['level-tag', getLevelClass(alert.alertLevel)]">
                        {{ getAlertLevelText(alert.alertLevel) }}
                      </span>
                    </td>
                    <td>{{ alert.location }}</td>
                    <td>
                      <span :class="['status-tag', getStatusClass(alert.status)]">
                        {{ alert.status === 'RESOLVED' ? '已解决' : '未解决' }}
                      </span>
                    </td>
                    <td>{{ alert.createTime }}</td>
                    <td>{{ alert.resolveTime || '-' }}</td>
                    <td>
                      <div class="action-buttons">
                        <button 
                          @click="viewAlertDetails(alert)"
                          class="detail-btn"
                        >
                          详情
                        </button>
                        <button 
                          v-if="alert.status === 'UNRESOLVED'" 
                          @click="handleAlert(alert)"
                          class="handle-btn"
                        >
                          处理
                        </button>
                        <span v-else>已完成</span>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- 分页组件 -->
            <div class="pagination" v-if="filteredAlertList.length > pageSize">
              <button 
                class="pagination-btn"
                :disabled="currentPage === 1"
                @click="currentPage--"
              >
                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                  <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.59-4.59z"/>
                </svg>
              </button>
              <span class="page-info">
                第 {{ currentPage }} / {{ totalPages }} 页
              </span>
              <button 
                class="pagination-btn"
                :disabled="currentPage === totalPages"
                @click="currentPage++"
              >
                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                  <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 处理预警的模态框 -->
    <div v-if="showHandleModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>处理预警</h3>
          <button class="close-btn" @click="closeModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>预警ID:</label>
            <input v-model="currentAlert.alertId" disabled />
          </div>
          <div class="form-group">
            <label>老人ID:</label>
            <input v-model="currentAlert.elderId" disabled />
          </div>
          <div class="form-group">
            <label>预警类型:</label>
            <input v-model="currentAlert.alertType" disabled />
          </div>
          <div class="form-group">
            <label>处理方案:</label>
            <textarea v-model="solution" placeholder="请输入处理方案"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="submitHandle" class="submit-btn">提交</button>
          <button @click="closeModal" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
    
    <!-- 查看详情的模态框 -->
    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
      <div class="modal-content detail-modal" @click.stop>
        <div class="modal-header">
          <h3>预警详情</h3>
          <button class="close-btn" @click="closeDetailModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="detail-grid">
            <div class="detail-item">
              <label>预警ID:</label>
              <span>{{ currentAlert.alertId }}</span>
            </div>
            <div class="detail-item">
              <label>老人ID:</label>
              <span>{{ currentAlert.elderId }}</span>
            </div>
            <div class="detail-item">
              <label>老人姓名:</label>
              <span>{{ currentAlert.elderName }}</span>
            </div>
            <div class="detail-item">
              <label>预警类型:</label>
              <span>{{ currentAlert.alertType }}</span>
            </div>
            <div class="detail-item">
              <label>预警等级:</label>
              <span :class="['level-tag', getLevelClass(currentAlert.alertLevel)]">
                {{ getAlertLevelText(currentAlert.alertLevel) }}
              </span>
            </div>
            <div class="detail-item">
              <label>位置:</label>
              <span>{{ currentAlert.location }}</span>
            </div>
            <div class="detail-item">
              <label>状态:</label>
              <span :class="['status-tag', getStatusClass(currentAlert.status)]">
                {{ currentAlert.status === 'RESOLVED' ? '已解决' : '未解决' }}
              </span>
            </div>
            <div class="detail-item full-width">
              <label>预警时间:</label>
              <span>{{ currentAlert.createTime }}</span>
            </div>
            <div v-if="currentAlert.resolveTime" class="detail-item full-width">
              <label>解决时间:</label>
              <span>{{ currentAlert.resolveTime }}</span>
            </div>
            <div v-if="currentAlert.solution" class="detail-item full-width">
              <label>处理方案:</label>
              <span>{{ currentAlert.solution }}</span>
            </div>
          </div>
          
          <!-- 地图容器 -->
          <div class="map-section">
            <h4>位置信息</h4>
            <div ref="mapContainer" class="map-container"></div>
            <div v-if="!hasValidLocation(currentAlert.location)" class="no-location">
              该预警信息无有效位置坐标
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="closeDetailModal" class="cancel-btn">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 音频元素用于播放提示音 -->
    <audio ref="alertSound" src="/sounds/alert.mp3"></audio>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import request from '../../utils/request'

const loading = ref(true)
const currentPage = ref(1)
const pageSize = 9
const websocket = ref(null)
const alertSound = ref(null)
const showHandleModal = ref(false)
const showDetailModal = ref(false)
const solution = ref('')
const currentAlert = ref({})
const filterStatus = ref('') // 状态筛选
const searchName = ref('') // 姓名搜索

const alertList = ref([])
const mapContainer = ref(null)
let map = null

// 计算未解决和已解决的数量
const pendingCount = computed(() => {
  return alertList.value.filter(alert => alert.status === 'UNRESOLVED').length
})

const resolvedCount = computed(() => {
  return alertList.value.filter(alert => alert.status === 'RESOLVED').length
})

// 计算筛选后的预警列表
const filteredAlertList = computed(() => {
  let list = [...alertList.value]; // 创建副本避免修改原数组
  if (filterStatus.value) {
    list = list.filter(alert => alert.status === filterStatus.value);
  }
  
  // 添加姓名搜索过滤
  if (searchName.value) {
    list = list.filter(alert => 
      alert.elderName && alert.elderName.includes(searchName.value)
    );
  }
  
  // 按创建时间倒序排序（新的在前）
  return list.sort((a, b) => {
    // 将时间字符串转换为时间戳进行比较
    const timeA = new Date(a.createTime).getTime();
    const timeB = new Date(b.createTime).getTime();
    return timeB - timeA;
  });
})

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(filteredAlertList.value.length / pageSize)
})

// 计算当前页数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  const end = start + pageSize
  return filteredAlertList.value.slice(start, end)
})

// 获取预警等级样式
const getLevelClass = (level) => {
  switch (level) {
    case 2: return 'danger'  // 红色预警
    case 1: return 'warning' // 黄色预警
    default: return 'normal'
  }
}

// 获取预警等级文本
const getAlertLevelText = (level) => {
  switch (level) {
    case 2: return '红色预警'
    case 1: return '黄色预警'
    default: return '未知等级'
  }
}

// 获取状态样式
const getStatusClass = (status) => {
  return status === 'RESOLVED' ? 'resolved' : 'pending'
}

// 检查位置信息是否有效
const hasValidLocation = (location) => {
  if (!location) return false
  // 检查是否符合 "经度,纬度" 格式
  const coords = location.split(',')
  if (coords.length !== 2) return false
  const longitude = parseFloat(coords[0])
  const latitude = parseFloat(coords[1])
  return !isNaN(longitude) && !isNaN(latitude)
}

// 解析位置信息
const parseLocation = (location) => {
  if (!location) return null
  const coords = location.split(',')
  if (coords.length !== 2) return null
  const longitude = parseFloat(coords[0])
  const latitude = parseFloat(coords[1])
  if (isNaN(longitude) || isNaN(latitude)) return null
  return { longitude, latitude }
}

// 获取当前社区ID
const getCommunityId = () => {
  // 优先从localStorage获取社区ID
  const storedCommunityId = localStorage.getItem('communityId');
  console.log('获取社区ID:', storedCommunityId);
  if (storedCommunityId) {
    return storedCommunityId;
  }
  
  // 如果localStorage中没有，则从URL参数获取
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('communityId') || 'general'; // 默认为'general'
}

// 获取预警列表数据（按社区获取）
const getAlertList = async () => {
  loading.value = true
  try {
    const communityId = getCommunityId();
    const res = await request.get('/community/alertlog')
    if (res.code === 1) {
      alertList.value = res.data
      // 数据已经按时间排序，在filteredAlertList计算属性中处理
    }
  } catch (error) {
    console.error('获取预警列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 应用筛选
const applyFilter = () => {
  currentPage.value = 1
}

// 处理预警
const handleAlert = (alert) => {
  currentAlert.value = { ...alert }
  solution.value = ''
  showHandleModal.value = true
}

// 查看详情
const viewAlertDetails = (alert) => {
  currentAlert.value = { ...alert }
  showDetailModal.value = true
  // 在下次DOM更新后初始化地图
  setTimeout(initMap, 0)
}

// 初始化地图
const initMap = () => {
  // 检查位置信息是否有效
  if (!hasValidLocation(currentAlert.value.location)) {
    return
  }
  
  // 检查是否已加载高德地图API
  if (!window.AMap) {
    // 动态加载高德地图API
    const script = document.createElement('script')
    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=79091d9eea224039b03e28237382a007'
    script.onload = () => {
      createMap()
    }
    document.head.appendChild(script)
  } else {
    createMap()
  }
}

// 创建地图
const createMap = () => {
  if (!mapContainer.value) return
  
  // 解析位置信息
  const location = parseLocation(currentAlert.value.location)
  if (!location) return
  
  const { longitude, latitude } = location
  
  map = new window.AMap.Map(mapContainer.value, {
    zoom: 15,
    center: [longitude, latitude]
  })
  
  // 添加标记
  new window.AMap.Marker({
    position: [longitude, latitude],
    map: map,
    title: '预警位置'
  })
}

// 关闭模态框
const closeModal = () => {
  showHandleModal.value = false
  solution.value = ''
  currentAlert.value = {}
}

// 关闭详情模态框
const closeDetailModal = () => {
  showDetailModal.value = false
  currentAlert.value = {}
}

// 提交处理
const submitHandle = async () => {
  if (!solution.value.trim()) {
    alert('请输入处理方案')
    return
  }

  try {
    const res = await request.put('/community/updateAlertlog', {
      alertId: currentAlert.value.alertId,
      solution: solution.value,
      status: 'RESOLVED'
    })

    if (res.code === 1) {
      // 更新本地数据
      const alertIndex = alertList.value.findIndex(a => a.alertId === currentAlert.value.alertId)
      if (alertIndex !== -1) {
        alertList.value[alertIndex].status = 'RESOLVED'
        alertList.value[alertIndex].solution = solution.value
        alertList.value[alertIndex].resolveTime = new Date().toLocaleString()
      }
      
      closeModal()
    } else {
      alert('处理失败: ' + res.message)
    }
  } catch (error) {
    console.error('处理预警失败:', error)
    alert('处理失败，请稍后重试')
  }
}

// 激活音频上下文（用户点击页面后）
const activateAudio = () => {
  if (window.AudioContext) {
    const ctx = new AudioContext();
    ctx.resume().then(() => {
      console.log('音频上下文已激活');
    });
  }
}

// 播放提示音（使用 Web Audio API）
const playAlertSound = () => {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();

  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);

  oscillator.type = 'sine';
  oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
  oscillator.frequency.exponentialRampToValueAtTime(200, audioContext.currentTime + 0.5);

  gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);

  oscillator.start();
  oscillator.stop(audioContext.currentTime + 0.5);
}

// 显示通知
const showNotification = (alert) => {
  if (Notification.permission === 'granted') {
    new Notification('新预警信息', {
      body: `老人ID: ${alert.elderId}, 类型: ${alert.alertType}, 等级: ${getAlertLevelText(alert.alertLevel)}`,
      icon: '/icons/icon.png'
    });
  }
}

// 测试提醒功能
const testAlert = () => {
  playAlertSound();
  if (Notification.permission === 'granted') {
    new Notification('测试提醒', {
      body: '这是一个测试预警信息',
      icon: '/icons/icon.png'
    });
  } else {
    alert('请允许通知权限');
  }
}

// 初始化WebSocket连接（按社区连接）
const initWebSocket = () => {
  const communityId = getCommunityId();
  console.log('初始化WebSocket连接:', communityId);
  
  const wsUrl = `ws://localhost:8080/ws/alert?communityId=${communityId}`;
  console.log('WebSocket URL:', wsUrl);
  
  websocket.value = new WebSocket(wsUrl);
  
  websocket.value.onopen = () => {
    console.log(`社区 ${communityId} 的WebSocket连接已建立`);
  };
  
  websocket.value.onmessage = (event) => {
    try {
      const message = JSON.parse(event.data);
      console.log('收到预警消息:', message);
      
      // 只处理社区端预警消息
      if (message.type === 'community_alert') {
        // 检查消息是否属于当前社区
        const currentCommunityId = getCommunityId();
        if (message.data.communityId === currentCommunityId || currentCommunityId === 'general') {
          // 重新获取完整的预警列表数据，确保数据一致性
          getAlertList();
          
          // 播放声音和弹窗（无论用户是否活跃）
          playAlertSound();
          showNotification(message.data);
        }
      }
    } catch (error) {
      console.error('解析WebSocket消息失败:', error);
    }
  };
  
  websocket.value.onerror = (error) => {
    console.error('WebSocket连接错误:', error);
  };
  
  websocket.value.onclose = (event) => {
    console.log('WebSocket连接已关闭', event.code, event.reason);
    // 可以在这里尝试重连
    if (event.code !== 1000) { // 1000表示正常关闭
      console.log('尝试重新连接...');
      // 可以添加重连逻辑
    }
  };
};

// 关闭WebSocket连接
const closeWebSocket = () => {
  if (websocket.value) {
    websocket.value.close()
  }
}

onMounted(() => {
  getAlertList()
  
  // 初始化WebSocket连接
  initWebSocket()

  // 请求通知权限
  if (Notification.permission !== 'granted' && Notification.permission !== 'denied') {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        console.log('通知权限已授予');
      }
    });
  }
})

onUnmounted(() => {
  // 组件销毁时关闭WebSocket连接
  closeWebSocket()
})
</script>

<style scoped>
.warnings-page {
  padding: 24px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
  min-height: 100%;
}

.page-header {
  margin-bottom: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 20px;
}

.page-header h2 {
  font-size: 24px;
  color: #2c3e50;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.header-subtitle {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

.main-content {
  max-width: 1800px;
  margin: 0 auto;
}

.table-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
}

.card-header {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  color: white;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  width: 24px;
  height: 24px;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  flex: 1;
}

.header-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

.stat-value {
  font-weight: 600;
  font-size: 16px;
}

.stat-value.pending {
  color: #ffeb3b;
}

.stat-value.resolved {
  color: #4caf50;
}

.filter-section {
  padding: 16px 24px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-group label {
  font-weight: 500;
  color: #495057;
}

.filter-group select,
.filter-group .name-search-input {
  padding: 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: white;
}

.filter-group .name-search-input {
  min-width: 150px;
}

.card-content {
  padding: 24px;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #6c757d;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #ff6b6b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-state p {
  margin: 0;
  font-size: 16px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
}

.empty-state svg {
  color: #ced4da;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0;
  font-size: 16px;
}

.table-container {
  overflow-x: auto;
}

.warnings-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.warnings-table th,
.warnings-table td {
  padding: 16px 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.warnings-table th {
  background: #fafafa;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alert-row.highlight {
  background-color: #fff8f8;
  animation: highlight 2s ease;
}

@keyframes highlight {
  0% { background-color: #ffebee; }
  50% { background-color: #ffcdd2; }
  100% { background-color: #fff8f8; }
}

.elder-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.elder-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffebee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6b6b;
}

.alert-type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.level-tag,
.status-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.level-tag.normal {
  background: #e8f7ef;
  color: #28a745;
}

.level-tag.warning {
  background: #fff3cd;
  color: #856404;
}

.level-tag.danger {
  background: #f8d7da;
  color: #721c24;
}

.status-tag.resolved {
  background: #e8f7ef;
  color: #28a745;
}

.status-tag.pending {
  background: #fff3cd;
  color: #856404;
}

.handle-btn,
.detail-btn {
  padding: 6px 12px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 5px;
}

.handle-btn {
  background-color: #007bff;
}

.handle-btn:hover {
  background-color: #0056b3;
}

.detail-btn {
  background-color: #28a745;
}

.detail-btn:hover {
  background-color: #218838;
}

.action-buttons {
  display: flex;
  align-items: center;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0 0;
  gap: 16px;
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dee2e6;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #495057;
}

.pagination-btn:hover:not(:disabled) {
  background: #ff6b6b;
  border-color: #ff6b6b;
  color: #fff;
}

.pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.page-info {
  color: #495057;
  font-size: 14px;
  font-weight: 500;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.detail-modal {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #aaa;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #495057;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.form-group input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-item.full-width {
  grid-column: span 2;
}

.detail-item label {
  font-weight: 500;
  color: #495057;
  margin-bottom: 5px;
}

.detail-item span {
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e9ecef;
  white-space: pre-wrap;
  word-break: break-word;
}

.map-section h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2c3e50;
}

.map-container {
  width: 100%;
  height: 300px;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}

.no-location {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
  font-style: italic;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e9ecef;
}

.submit-btn,
.cancel-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.submit-btn {
  background-color: #28a745;
  color: white;
}

.submit-btn:hover {
  background-color: #218838;
}

.cancel-btn {
  background-color: #6c757d;
  color: white;
}

.cancel-btn:hover {
  background-color: #5a6268;
}

@media (max-width: 768px) {
  .warnings-page {
    padding: 16px;
  }
  
  .page-header h2 {
    font-size: 20px;
  }
  
  .header-stats {
    display: none;
  }
  
  .warnings-table th,
  .warnings-table td {
    padding: 12px 8px;
    font-size: 13px;
  }
  
  .level-tag,
  .status-tag {
    padding: 2px 6px;
    font-size: 11px;
  }
  
  .filter-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-group {
    width: 100%;
  }
  
  .filter-group .name-search-input {
    min-width: auto;
    width: 100%;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
  
  .detail-item.full-width {
    grid-column: span 1;
  }
  
  .detail-modal {
    width: 95%;
  }
}
</style>